<!DOCTYPE html>
<html lang="en">

<head>
	<title>Blockland - a multi-player game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="description"
		content="Blockland is a multi-player game. Using the Three.js library. author:Nik Lever ©2018 category:application-javascript" />
	<meta property="og:url" content="http://niksgames.com/blockland" />
	<meta property="og:type" content="product" />
	<meta property="og:title" content="Blockland - a multi-player game" />
	<meta property="og:description"
		content="Blockland is a multi-player game. Using the Three.js library. author:Nik Lever ©2018 category:application-javascript" />
	<meta property="og:image" content="http://niksgames.com/blockland/assets/blockland-og.jpg" />
	<meta property="og:image:type" content="image/jpeg" />
	<meta property="og:image:width" content="1265" />
	<meta property="og:image:height" content="817" />
	<meta property="og:image:alt" content="Blockland - a multi-player game" />
	<meta property='og:video' content='https://www.youtube.com/v/1r9V_JEEMlA' />
	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Kavivanar" rel="stylesheet">
	<link rel="stylesheet" href="https://www.w3schools.cn/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- Add icon library -->
	<link rel="stylesheet" href="https://www.w3schools.cn/cdnjs/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
	<style>
		body {
			font-family: Monospace;
			background-color: #000;
			color: #fff;
			margin: 0px;
			overflow: hidden;
		}

		#message {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			font-family: 'Kavivanar', san-serif;
			font-size: 40px;
			width: 80%;
			max-width: 280px;
			padding: 15px 15px 50px 15px;
			text-align: center;
			display: none;
			align-content: center;
			justify-content: center;
			background-color: aliceblue;
			border: medium solid #3D455C;
			border-radius: 20px;
			color: #3D455C;
			z-index: 99;
		}

		#message_ok {
			position: absolute;
			bottom: 10px;
			padding: 10px 20px 10px 20px;
			font-family: sans-serif;
			font-size: 20px;
			background-color: #3D455C;
			color: #fff;
			border-radius: 8px;
			border: medium solid #696882;
		}

		#chat {
			position: absolute;
			width: 100%;
			height: 40px;
			bottom: -40px;
			transition: all 0.5s;
		}

		form {
			background: #000;
			padding: 3px;
			width: 100%;
		}

		form input {
			border: 0;
			padding: 10px;
			width: 88%;
			margin-right: .5%;
		}

		form button {
			width: 8%;
			background: rgb(130, 224, 255);
			border: none;
			padding: 10px;
		}

		.fa {
			padding: 20px;
			font-size: 30px;
			width: 50px;
			text-align: center;
			text-decoration: none;
			margin: 5px 2px;
		}

		.fa:hover {
			opacity: 0.7;
		}

		.fa-instagram {
			background: #125688;
			color: white;
		}

		a {
			text-decoration: none;
			display: inline-block;
			padding: 8px 16px;
			position: absolute;
		}

		a:hover {
			background-color: #ddd;
			color: black;
		}

		.previous {
			background-color: #f1f1f1;
			color: black;
		}

		.next {
			background-color: #4CAF50;
			color: white;
		}

		.round {
			border-radius: 50%;
		}

		/* 与终点窗口有关的css */
		/* 为所有按钮设置样式 */
		button {
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			cursor: pointer;
			width: 30%;
			opacity: 0.9;
		}

		button:hover {
			opacity: 1;
		}

		/* Float cancel and delete buttons and add an equal width */
		.cancelbtn,
		.deletebtn {
			/* float: left; */
			width: 30%;
		}

		/* Add a color to the cancel button */
		.cancelbtn {
			background-color: #ccc;
			color: black;
		}

		/* Add a color to the delete button */
		.deletebtn {
			background-color: #f44336;
		}

		/* Add padding and center-align text to the container */
		.container {
			padding: 16px;
			text-align: center;
		}

		/* 模态（背景）*/
		.modal {
			display: none;
			/* Hidden by default */
			position: fixed;
			/* Stay in place */
			z-index: 1;
			/* Sit on top */
			left: 0;
			top: 7%;
			width: 100%;
			/* Full width */
			height: 100%;
			/* Full height */
			overflow: auto;
			/* Enable scroll if needed */
			/* background-color: #474e5d; */
			padding-top: 50px;
			/* opacity: 30%; */
		}

		/* Modal Content/Box */
		.modal-content {
			background-color: #fefefe;
			margin: 5% auto 15% auto;
			/* 距顶部 5%，距底部 15% 并居中 */
			border: 1px solid #888;
			width: 80%;
			opacity: 1;
			/* 可以多也可以少，取决于屏幕尺寸 */
		}

		/* 设置水平标尺的样式 */
		hr {
			border: 1px solid #f1f1f1;
			margin-bottom: 25px;
		}

		/* The Modal Close Button (x) */
		.close {
			position: absolute;
			right: 35px;
			top: 15px;
			font-size: 40px;
			font-weight: bold;
			color: #f1f1f1;
		}

		.close:hover,
		.close:focus {
			color: #f44336;
			cursor: pointer;
		}

		/* 清除浮动 */
		.clearfix::after {
			content: "";
			clear: both;
			display: table;
		}

		/* Change styles for cancel button and delete button on extra small screens */
		@media screen and (max-width: 300px) {

			.cancelbtn,
			.deletebtn {
				width: 100%;
			}
		}

		/* 与npc窗口有关的css */
		/* 为所有按钮设置样式 */
		button_n {
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			cursor: pointer;
			width: 30%;
			opacity: 0.9;
		}

		button_n:hover {
			opacity: 1;
		}

		/* Float cancel and delete buttons and add an equal width */
		.cancelbtn_n,
		.deletebtn_n {
			/* float: left; */
			width: 30%;
		}

		/* Add a color to the cancel button */
		.cancelbtn_n {
			background-color: #ccc;
			color: black;
		}

		/* Add a color to the delete button */
		.deletebtn_n {
			background-color: #f44336;
		}

		/* Add padding and center-align text to the container */
		.container_n {
			padding: 16px;
			text-align: center;
		}

		/* 模态（背景）*/
		.modal_n {
			display: none;
			/* Hidden by default */
			position: fixed;
			/* Stay in place */
			z-index: 1;
			/* Sit on top */
			left: 0;
			top: 7%;
			width: 100%;
			/* Full width */
			height: 100%;
			/* Full height */
			overflow: auto;
			/* Enable scroll if needed */
			/* background-color: #474e5d; */
			padding-top: 50px;
			/* opacity: 30%; */
		}

		/* Modal Content/Box */
		.modal-content_n {
			background-color: #fefefe;
			margin: 5% auto 15% auto;
			/* 距顶部 5%，距底部 15% 并居中 */
			border: 1px solid #888;
			width: 80%;
			opacity: 1;
			/* 可以多也可以少，取决于屏幕尺寸 */
		}

		/* 设置水平标尺的样式 */
		hr_n {
			border: 1px solid #f1f1f1;
			margin-bottom: 25px;
		}

		/* The Modal Close Button (x) */
		.close_n {
			position: absolute;
			right: 35px;
			top: 15px;
			font-size: 40px;
			font-weight: bold;
			color: #f1f1f1;
		}

		.close_n:hover,
		.close_n:focus {
			color: #f44336;
			cursor: pointer;
		}

		/* 清除浮动 */
		.clearfix_n::after {
			content: "";
			clear: both;
			display: table;
		}

		/* Change styles for cancel button and delete button on extra small screens */
		@media screen and (max-width: 300px) {

			.cancelbtn,
			.deletebtn {
				width: 100%;
			}
		}

		/* 与强盗窗口有关的css */
		/* 为所有按钮设置样式 */
		button {
			background-color: #4CAF50;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
			border: none;
			cursor: pointer;
			width: 30%;
			opacity: 0.9;
		}

		button:hover {
			opacity: 1;
		}

		/* Float cancel and delete buttons and add an equal width */
		.cancelbtn_r,
		.deletebtn_r {
			/* float: left; */
			width: 30%;
		}

		/* Add a color to the cancel button */
		.cancelbtn_r {
			background-color: #ccc;
			color: black;
		}

		/* Add a color to the delete button */
		.deletebtn_r {
			background-color: #f44336;
		}

		/* Add padding and center-align text to the container */
		.container_r {
			padding: 16px;
			text-align: center;
		}

		/* 模态（背景）*/
		.modal_r {
			display: none;
			/* Hidden by default */
			position: fixed;
			/* Stay in place */
			z-index: 1;
			/* Sit on top */
			left: 0;
			top: 7%;
			width: 100%;
			/* Full width */
			height: 100%;
			/* Full height */
			overflow: auto;
			/* Enable scroll if needed */
			/* background-color: #474e5d; */
			padding-top: 50px;
			/* opacity: 30%; */
		}

		/* Modal Content/Box */
		.modal-content_r {
			background-color: #fefefe;
			margin: 5% auto 15% auto;
			/* 距顶部 5%，距底部 15% 并居中 */
			border: 1px solid #888;
			width: 80%;
			opacity: 1;
			/* 可以多也可以少，取决于屏幕尺寸 */
		}

		/* 设置水平标尺的样式 */
		hr {
			border: 1px solid #f1f1f1;
			margin-bottom: 25px;
		}

		/* The Modal Close Button (x) */
		.close_r {
			position: absolute;
			right: 35px;
			top: 15px;
			font-size: 40px;
			font-weight: bold;
			color: #f1f1f1;
		}

		.close_r:hover,
		.close_r:focus {
			color: #f44336;
			cursor: pointer;
		}

		/* 清除浮动 */
		.clearfix_r::after {
			content: "";
			clear: both;
			display: table;
		}

		/* 聊天区的样式 */
		.chat::-webkit-scrollbar {
			display: none;
		}

		.chat {
			-ms-overflow-style: none;
			/* IE and Edge */
			scrollbar-width: none;
			/* Firefox */
		}

		.talk_sub:active {
			box-shadow: 0px 2px 0px rgba(0, 0, 0, .2);
			top: 2px;
		}

		.three-d {
			color: #fff;
			background-color: #f1c40f;
			text-shadow: -2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0),
				-2px 2px 2px rgb(209 132 0);
			box-shadow: 0px 15px 0px 0px #f39c12;
			transition: all .5s;
		}

		.three-d:hover {
			background-color: #fcdc5e;
		}

		.three-d:active {
			transform: translate(0, 4px);
			box-shadow: 0px 1px 0px 0px #f39c12;
		}


		.talk_con:hover {
			box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
			transform: translate(0, -5px);
			transition-delay: 0s !important;
		}

		#talk {
			background: linear-gradient(45deg, #04e6fb, #65ff9a);
			clip-path: polygon(0 0,
					30px 50%,
					0 100%,
					calc(100% - 30px) 100%,
					100% 50%,
					calc(100% - 30px) 0);
		}

		.content {
			color: #f6f4f4;
			position: absolute;
			display: none;
			padding: 10px;
			box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
			background-color: rgba(45, 45, 60, 0.5);
			border-radius: 6px;
			left: 80%;
			top: 10%
		}
	</style>
</head>

<body>
	<div id="message">
		<p id="message_text"></p>
		<button id="message_ok">OK</button>
	</div>
	<div id="chat">
		<form id="msg-form" action="">
			<input id="m" autocomplete="off" /><button>Send</button>
		</form>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
	<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="/socket.io/socket.io.js"></script>

	<script src="libs/inflate.min.js"></script>
	<script src="libs/FBXLoader.js"></script>
	<script src="libs/Detector.js"></script>
	<script src="libs/toon3d.js"></script>
	<script src="game.js"></script>
	<script>

		var game;
		document.addEventListener("DOMContentLoaded", function () { game = new Game(); });

		$(function () {
			var showContent = document.getElementById('chat');
			showContent.scrollTop = showContent.scrollHeight;
		});
		$(function () {
			var socket = io();
			$('#talksub').click(function () {
				var showContent = document.getElementById('chat');
				showContent.scrollTop = showContent.scrollHeight;

				if ($('#talkwords').val() == '') {
					return;
				}
				socket.emit('chat message in game', sessionStorage.getItem("username") + ': ' + $('#talkwords').val());
				$('#talkwords').val('');

				return false;
			});
			socket.on('chat message in game', function (msg) {
				$('.chat').append($('<p>').text(msg));
				var showContent = document.getElementById('chat_id');
				showContent.scrollTop = showContent.scrollHeight;

			});
		});
	</script>

	<!-- 房间人数 -->
	<div style="position:absolute;width:100%;height:10px;text-align: center;">
		<p id="num" style="color: #000;"></p>
	</div>

	<!-- 计时器 -->
	<div  id="count" style="width:100%;text-align: center;position: absolute;top:5%;color: #000;display: none;">
		<h3>到达终点计时结束</h3>
		<h2 id="dec"></h2>
	</div>
	
	<!-- 播报到达终点人员的区域 -->
	<div id="end" class="chat-end" style="width: 100%;;height:200px;overflow: auto;position: absolute;left:2%;top:20%;color: #000;">
	</div>

	<!-- 成功通关后的窗口 -->
	<div id="id01" class="modal">
		<div class="container" style="top:10%">
			<h1 style="font-size: 40px;color:#000">恭喜你成功通关</h1>
			<h3 id="h3-time" style="font-size: 40px;color:#000"></h3>
			<div class="clearfix">
				<button type="button" onclick="location.reload()" class="deletebtn">重新开始</button>
			</div>
		</div>
	</div>

	<!-- 遇到npc后的窗口 -->
	<div id="id01_n" class="modal_n">
		<div class="container_n" style="top:10%">
			<h1 style="font-size: 40px;color:#000">恭喜你发现隐藏提示</h1>
			<h1 style="font-size: 35px;color:#000">迷宫地图一张</h1>
			<div class="clearfix_n">
				<button type="button" onclick="shouxia()" class="deletebtn_n">确认收下</button>
			</div>
		</div>
	</div>

	<!-- 地图 -->
	<img class="image" id="map" style="border-radius: 50px;top:50%;position:absolute;display: none;" src="./assets/images/map.png">

	<!-- 遇到rob后的窗口 -->
	<div id="id01_r" class="modal_r">
		<div class="container_r" style="top:15%">
			<h1 style="font-size: 40px;color:#000">恭喜你遇到了强盗</h1>
			<h1 style="font-size: 35px;color:#000">请回到起点</h1>
			<div class="clearfix_r">
				<button type="button" onclick="location.reload()" class="deletebtn_r">回到起点</button>
			</div>
		</div>
	</div>

	<!-- 聊天按钮 -->
	<button
		style="background-color: rgba(0,0,0,0);width: auto;height: auto; border: none;position:absolute;color:#000;top:0px;left:85%">
		<i id="bi-chat" class="bi-chat-dots" style="font-size: large;" onclick="showChat()"></i>
		<br>
		聊天
	</button>

	<!-- 帮助按钮 -->
	<button
		style="background-color: rgba(0,0,0,0);width: auto;height: auto; border: none;position:absolute;color:#000;top:0px;left:90%">
		<i id="bi-info" class="bi-info-circle" style="font-size: large;" onclick="showMsg()"></i>
		<br>
		帮助
	</button>

	<!-- 帮助按钮的提示 -->
	<div class="content" id="conten_id">
		<span>操作指南：</span><br>
		<span>1.操纵摇杆控制人物移动</span><br>
		<span>2.穿过起点的门自动开始计时</span><br>
		<span>3.按S切换视角</span><br>
		<span>4.点击其它玩家可以与其单独对话</span><br>
		<span>5.点击聊天可以在房间内发送消息</span><br>
		<span>6.左上角退出房间</span><br>
		<span>7.起点的门会在靠近时自动打开，离开时自动关闭</span><br>
	</div>


	<!-- 聊天区 -->
	<div class="talk_con" id="talk_con_id" style="position: absolute;top:50%;left:70%;border-radius: 10px;
	    width: 23%;
	    padding: 20px;
	    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
	    background-color: rgba(45, 45, 60, 0.5);display: none;">
		<label>聊天区</label>
		<br>
		<div id="chat_id" class="chat" style="width: 100%;;height:270px;overflow: auto;">

		</div>
		<!-- <br>  -->
		<div class="talk_input" id="talk_input_id">
			<input type="text" class="talk_word" id="talkwords" style="height: 30px;">
			<input type="button" value="发送" class="talk_sub" id="talksub" style="
	                width: 100px;
	                height: 40px;
	                background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%);
	                border: none;
	                border-radius: 5px;
	                position: relative;
	                border-bottom: 5px solid #2b8bc6;
	                color: #fbfbfb;
	                font-weight: 600;
	                font-family: 'Open Sans', sans-serif;
	                text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
	                font-size: 15px;
	                text-align: center;
	                box-shadow: 0px 3px 0px rgba(0, 0, 0, .2);
	                cursor: pointer;">
		</div>


	</div>
</body>

</html>